<template>
    <HeaderCom />
    <div class="common-layout">
      <el-container>
        <el-main class="home-left">
          <el-card shadow="hover" v-for="(item, index) in blog" :key="index" :body-style="{ padding: '0px' }">
            <div v-if="index % 2 == 0" class="blog-card" :body-style="{ padding: '0px' }">
              <el-link :underline="false" @click="Article(item.blog_id)">
                <div class="blog-card-image">
                  <el-image :src="item.cover_image" alt="blog image" :title="item.blog_title"></el-image>
                </div>
              </el-link>
              <div class="blog-card-content">
                <div>
                  <el-link :underline="false" @click="Article(item.blog_id)">
                    <h3 class="blog-card-title">{{ item.blog_title }}</h3>
                  </el-link>
                </div>
                <div><el-link :underline="false" type="info" @click="Article(item.blog_id)">
                    <p class="blog-card-description" @click="Article(item.blog_id)">
                      {{ item.blog_content }}
                    </p>
                  </el-link>
                </div>
                <div class="blog-card-meta">
                  <el-icon style="vertical-align: middle">
                    <Calendar />
                  </el-icon>
                  <span class="blog-card-date" style="vertical-align: middle">{{ item.create_time }}</span>
                  <el-icon style="vertical-align: middle">
                    <List />
                  </el-icon>
                  <span style="vertical-align: middle">{{ item.type_name }}</span>
                </div>
              </div>
            </div>
            <div v-else class="blog-card" :body-style="{ padding: '0px' }">
              <div class="blog-card-content-right">
                <el-link :underline="false" @click="Article(item.blog_id)">
                  <h3 class="blog-card-title">{{ item.blog_title }}</h3>
                </el-link>
                <div><el-link :underline="false" type="info" @click="Article(item.blog_id)">
                    <p class="blog-card-description" @click="Article(item.blog_id)">
                      {{ item.blog_content }}
                    </p>
                  </el-link>
                </div>
                <div class="blog-card-meta">
                  <el-icon style="vertical-align: middle">
                    <Calendar />
                  </el-icon>
                  <span class="blog-card-date" style="vertical-align: middle">{{ item.create_time }}</span>
                  <el-icon style="vertical-align: middle">
                    <List />
                  </el-icon>
                  <span style="vertical-align: middle">{{ item.type_name }}</span>
                </div>
              </div>
              <el-link :underline="false" @click="Article(item.blog_id)">
                <div class="blog-card-image-right">
                  <el-image :src="item.cover_image" alt="blog image" :title="item.blog_title"></el-image>
                </div>
              </el-link>
            </div>
  
          </el-card>
  
        </el-main>
        <el-main class="home-right">
          <el-card class="personal-card">
            <div class="avatar-wrapper">
              <el-avatar :size="100" :src="User.avatar"></el-avatar>
            </div>
            <div class="info-wrapper">
              <h2 class="username">{{ User.nickname }}</h2>
              <div class="counts-wrapper">
                <div class="count-item">
                  <i class="el-icon-tickets"></i>
                  <p>文章</p>
                  <p>{{ BlogCounts.blogCount }}</p>
                </div>
                <div class="count-item">
                  <i class="el-icon-folder"></i>
                  <p>分类</p>
                  <p>{{ BlogCounts.typeCount }}</p>
                </div>
                <div class="count-item">
                  <i class="el-icon-collection-tag"></i>
                  <p>标签</p>
                  <p>{{ BlogCounts.tagCount }}</p>
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" class="tianqi-card">
            <div class="tianqi-card-top">
              <div class="tianqi-card-top-WenDu">
                <span class="tianqi-card-top-WenDu-a">{{ tianqi.temp }}</span>
                <span class="tianqi-card-top-WenDu-b"><b>°C</b></span>
              </div>
              <div class="tianqi-card-top-wea">
                <span class="tianqi-card-top-WenDu-c">{{ tianqi.wea }}</span>
                <!-- <span class="tianqi-card-top-WenDu-d">空气{{ state.air_level }}</span> -->
              </div>
            </div>
            <div class="tianqi-card-bottom">
              <div class="">
                <span class="tianqi-card-bottom-a">{{ state.city }}</span>
              </div>
              <div class="tianqi-card-bottom-b">
                <span class="tianqi-card-bottom-b1">知你冷暖，在你身边</span>
                <div class="tianqi-card-bottom-b2">
                  <span class="tianqi-card-bottom-b2-date">{{ state.ri }}</span>
                  <span class="tianqi-card-bottom-b2-year">{{ state.nianyue }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script lang="ts" setup>
  import HeaderCom from "../components/HeaderCom.vue"
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from "vue-router"
  import { getblog, weather, BlogCount, UserAvatar } from '../http/index';
  import { Calendar, List } from '@element-plus/icons-vue'
  const router = useRouter();
  const state = reactive({
    names: 'xxxxx',
  
    city: '上海',
    ri: '',
    nianyue: '',
  
  })
  const tianqi = reactive({
    temp: 0,
    wea: ''
  })
  const blog = ref()
  const BlogCounts = reactive({
    blogCount: 0,
    typeCount: 0,
    tagCount: 0,
  })
  const User = reactive({
    user_id: 0,
    nickname: '',
    avatar: ''
  })
  onMounted(async () => {
    let BlogReq = {
      blog_id: 0,
      type_id: 0
    }
    blog.value = (await getblog(BlogReq)).data.result
    var blogs = (await BlogCount()).data.result
    BlogCounts.blogCount = blogs.blogCount
    BlogCounts.typeCount = blogs.typeCount
    BlogCounts.tagCount = blogs.tagCount
  
    let UserReq = {
      user_id: 1,
    }
    var users = (await UserAvatar(UserReq)).data.result
    User.user_id = users.user_id
    User.nickname = users.nickname
    User.avatar = users.avatar
    let parms = {
      token: 'iKKllVcxrjA6zpJI',
      city: '上海'
    }
    var dataHours = (await weather(parms)).data.data.hour;
    for (let index = 0; index < dataHours.length; index++) {
      let element = dataHours[index];
      var oDate1 = new Date(element.time);
      var oDate2 = new Date();
      if (oDate1.getDate() == oDate2.getDate() && oDate1.getHours() == oDate2.getHours() + 1) {
        tianqi.temp = element.temp;
        tianqi.wea = element.wea;
      }
    }
    var dt = new Date();
    //年
    let year = dt.getFullYear();
    //月份是从0月开始获取的，所以要+1;
    let month = (dt.getMonth() + 1).toString().padStart(2, '0');
    state.nianyue = year + '/' + month;
    //日
    var d = dt.getDate().toString().padStart(2, '0');
    state.ri = d;
    /* increment(); */
  })
  
  function Article(id: number) {
    const { href } = router.resolve({ path: `/articleDetails/${id}` });
    window.open(href, "_blank")
  
  }
  /* function Article(id: number) {
      router.push({
          name: "articleDetails",
          params: { id: id }
      })
  } */
  /* function increment() {
    setInterval(function(){
        
      },3000);
  } */
  
  
  
  
  
  </script>
<style lang="scss" scoped>
.el-container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2%;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 30px;

  @media (max-width: 992px) {
    width: 90%;
    grid-template-columns: 1fr;
  }
}

.home-left {
  .el-card {
    border-radius: 12px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    overflow: hidden;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .blog-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 200px;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .blog-card-image,
    .blog-card-image-right {
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease;

      &:hover img {
        transform: scale(1.05);
      }

      .el-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .blog-card-content,
    .blog-card-content-right {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .blog-card-title {
        font-size: 1.5rem;
        margin: 0;
        color: #2c3e50;
        transition: color 0.3s ease;
        
        &:hover {
          color: #409EFF;
        }
      }

      .blog-card-description {
        color: #7f8c8d;
        font-size: 0.95rem;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin: 15px 0;
      }

      .blog-card-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #95a5a6;
        font-size: 0.9rem;

        .el-icon {
          font-size: 1.1rem;
        }
      }
    }
  }
}

.home-right {
  .personal-card {
    text-align: center;
    border-radius: 12px;
    
    .avatar-wrapper {
      margin: -50px auto 20px;
      .el-avatar {
        border: 3px solid #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
    }

    .username {
      font-size: 1.4rem;
      margin-bottom: 1.5rem;
      color: #2c3e50;
    }

    .counts-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;

      .count-item {
        i {
          font-size: 1.8rem;
          color: #409EFF;
          margin-bottom: 8px;
        }

        p {
          margin: 4px 0;
          &:first-of-type {
            color: #7f8c8d;
          }
          &:last-of-type {
            color: #2c3e50;
            font-weight: 600;
          }
        }
      }
    }
  }

  .tianqi-card {
    margin-top: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6B8DD6 0%, #8E37D7 100%);
    color: white;

    .tianqi-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;

      .tianqi-card-top-WenDu {
        display: flex;
        align-items: baseline;
        
        &-a {
          font-size: 3rem;
          font-weight: 300;
        }
        &-b {
          font-size: 1.2rem;
          margin-left: 5px;
        }
      }

      .tianqi-card-top-wea {
        text-align: right;
        &-c {
          display: block;
          font-size: 1.2rem;
        }
      }
    }

    .tianqi-card-bottom {
      padding: 15px 20px;
      background: rgba(255, 255, 255, 0.1);
      
      &-a {
        font-size: 1.1rem;
        display: block;
        margin-bottom: 8px;
      }

      &-b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        &1 {
          font-size: 0.9rem;
          opacity: 0.9;
        }

        &2 {
          text-align: right;
          
          &-date {
            font-size: 1.8rem;
            font-weight: 300;
            display: block;
            line-height: 1;
          }
          
          &-year {
            font-size: 0.8rem;
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>